<template>
  <view class="main1">
    <u-navbar :title="title" :isBack="false" :background="'none'" :borderBottom="false">
    </u-navbar>
    <view class="headBox">
      <button style="background: none !important">
        <img :src="userInfo.avatar" alt="" />
      </button>

      <view class="contBox">
        <template v-if="userInfo.token">
          <view class="UserNameAndId">
            <view class="nickName">{{ userInfo.name }} </view>
            <view class="uInfo" @click="goToChangeUserInfo"><uni-icons type="compose" color="#37abf8"
                size="22"></uni-icons></view>
            <!-- <view class="UID"><uni-icons custom-prefix="custom-icon" type="icon-youxi" size="30"></uni-icons></view> -->
          </view>

          <view class="VIPcard">
            <!-- <image class="VIPlogo" src="../../static/logo/VIP (2).png"> </image> -->
            <view class="VIP" @click="copy(userInfo.userId)">UID:{{ userInfo.userId }}</view>
          </view>
        </template>
        <template v-else>
          <view class="nickName" style="line-height: 96rpx" @click="open()">
            <span style="
                padding: 10rpx;
                font-size: 48rpx;
                border-radius: 14rpx;
              ">登录</span>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/store'

export default {
  data() {
    return { userInfo: {}, goLogin: '' };
  },


  methods: {
    copy(value) {
      uni.setClipboardData({
        data: value,
        success: function () {
          //调用方法成功
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          });
        }
      })
    },


    goAgreement() {
      uni.navigateTo({
        url: '/subpage/Agreement/Agreement'
      })
    },
    open() {

      this.goAgreement()


    },


    goToChangeUserInfo() {
      uni.navigateTo({ url: '/pages/login' })
    },
    wxlogin() {
      uni.showLoading({
        title: "登录中",
      });
      let myuni = uni;
      let that = this;
      uni.getUserProfile({  //由于.uni.getUserInfo无法获得用户真正的的昵称和头像，所以改uni.getUserProfile
        desc: "用于完善会员资料",  //desc:声明获取用户个人信息后的用途，不超过30个字符
        success: function ({ userInfo }) { //success接口调用成功的回调
          uni.setStorage({  //setStorage:将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
            key: "userInfo",  //key:本地缓存中的指定的 key
            data: userInfo,  //data:需要存储的数据，只支持原生类型、及能够通过 JSON.stringify 序列化的对象，这里的userInfo是作为参数传进来的值
          });

          uni.setStorageSync('historyList', []);



          uni.login({
            success(res) {
              if (res.code) {
                let data = {
                  code: res.code,
                  nickName: userInfo.nickName,
                  avatar: userInfo.avatarUrl,
                };
                store.dispatch('Login', data)
                  .then((res) => {
                    uni.hideLoading();
                    uni.showToast({
                      title: "登录成功",
                    });

                    store.dispatch('GetInfo').then((res) => {
                      uni.reLaunch({ url: "/pages/mine/index" });

                    });

                  })
                  .catch((error) => {
                    uni.hideLoading();
                    uni.showToast({
                      icon: "error",
                      title: "登录失败",
                    });
                  });
              }
            },
          });
        },
        fail(res) {
          uni.showToast({
            icon: "error",
            title: "登录失败",
          });
        },
      });
    },
  },
  created() {
    this.userInfo = store.getters
  }
};
</script>
<style lang="less" scoped>
// 重置按钮的样式
.confrim {
  .Confrim_Content {
    background-color: #f6f6f6;
    border-radius: 30rpx;
    width: 600rpx;

    .Confrim_title {
      font-weight: 600;
      font-size: 31rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
    }

    .Confrim_text {
      margin-left: 50rpx;
      width: 500rpx;
    }

    .agreement {
      height: 50rpx;
      margin-left: 40rpx;
      margin-top: 5rpx;
      margin-bottom: 30rpx;
      color: blue;
    }

    .button_list {
      display: flex;
      justify-content: space-between;

      .Cancel {
        width: 300rpx;
        border-radius: 0rpx 0rpx 0rpx 30rpx;
      }

      .Confrim {
        width: 300rpx;
        border-radius: 0rpx 0rpx 30rpx 0rpx;
      }
    }
  }
}


button::after {
  border: none;
}

.main1 {
  width: 750rpx;
  height: 400rpx;
  background: url("http://zhxjcdn.dumicdn.cn/mineBg.png");
  background-color: #FFE0B2;

  background-size: 100% 100%;

  .headBox {
    padding: 52rpx 35rpx 0 30rpx;
    display: flex;
    justify-content: space-between;

    img {
      margin-top: 15rpx;
      width: 90rpx;
      height: 90rpx;
      background: #ffffff;
      border-radius: 100%;
      margin-right: 19rpx;
    }

    .contBox {
      width: 480rpx;
      margin-left: -60rpx;

      .nickName {
        max-width: 256rpx;
        overflow: hidden;

        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: white;
      }

      .uInfo {
        margin-left: 16rpx;
        font-size: 22rpx;
        color: #37abf8;
      }

      .VIPcard {
        margin-top: 10rpx;
        display: flex;
        justify-content: flex-start;
        width: 360rpx;
      }

      .VIP {
        // margin-left: -12rpx;
        padding: 0 10rpx;
        border-radius: 10rpx;
        width: 360rpx;
        height: 35rpx;
        background: #f6f6f6;
        text-align: center;
        line-height: 32rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: white;
        background-color: #ffd700;
      }

      .VIPlogo {
        border-radius: 10rpx;
        background-color: #ffd700;
        width: 4.5vw;
        height: 35rpx;
      }

      .UserNameAndId {
        margin-top: 14rpx;
        height: 42rpx;
        display: flex;
        justify-content: flex-start;

      }

      .UID {
        color: white;
        font-size: 25rpx;
        margin-top: 25rpx;
        margin-left: 10rpx;
      }
    }
  }
}

/deep/ .u-navbar-inner {
  margin-bottom: 40rpx;
}
</style>
